<template>
    <div class="pageBox">
        <div class="typeTitle">综合处-内容类别</div>
        <div class="typeList">
            <div class="typeItem"  v-for="(item, index) in typeList1" :key="index">{{item.catname}}</div>
        </div>
        <div class="typeTitle border">
            自定义内容类别
            <div class="addBtn" @click="open">自定义新增</div>
        </div>
        <div class="typeGroup">
            <el-checkbox-group v-model="checkList" @change="catEnable">
                <el-checkbox :label="item.catname" v-for="(item, index) in typeList2" :key="index"></el-checkbox>
            </el-checkbox-group>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            typeList1: [],
            typeList2: [],
            checkList: []
        }
    },
    mounted(){
        this.getTypeList()
    },
    methods: {
        open() {
            this.$prompt('请输入自定义内容类别', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /\S/,
            inputErrorMessage: '内容类别不能为空'
            }).then(({ value }) => {
                let postData = {
                    enabled: true,
                    name: value
                }
                this.catAdd(postData)
            })
        },
        // 获取内容类别
        getTypeList() {
            this.$axios.post('/communal/cate/csCatList').then((res) => {
                if (res) {
                    this.typeList1 = res.system
                    this.typeList2 = res.custom
                    this.checkList = []
                    res.custom.forEach(item => {
                        if(item.enabled == true){
                            this.checkList.push(item.catname)
                        }
                    })
                }
            })
        },
        // 新增内容类别
        catAdd(postData) {
            this.$axios.post('/communal/cate/csCatAdd', postData).then((res) => {
                if (res) {
                    this.getTypeList()
                }
            })
        },
        // 修改自定义类别状态
        catEnable(value) {
            let ids = []
            value.forEach(item=>{
                this.typeList2.forEach(e=>{
                    if(item==e.catname){
                        ids.push(e.cslbid)
                    }
                })
            })
            let postData = {
                enabled: true,
                ids: ids
            }
            this.$axios.post('/communal/cate/csCatEnable', postData).then((res) => {
                if (res) {
                    this.getTypeList()
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
    .pageBox{
        color: #666;
        padding: 30px;
        .typeTitle{
            font-size: 18px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            .addBtn{
                font-size: 14px;
                height: 32px;
                line-height: 32px;
                width: 100px;
                text-align: center;
                font-weight: normal;
                background: #369FFF;
                color: #fff;
                border-radius: 5px;
                cursor: pointer;
            }
        }
        .typeList{
            font-size: 16px;
            display: flex;
            display: -webkit-flex;
            flex-direction: row;
            flex-wrap: wrap;
            .typeItem{
                width: 20%;
                margin-top: 30px;
            }
        }
        .typeTitle.border{
            border-top: 1px solid rgba($color: #666666, $alpha: .2);
            margin-top: 30px;
            padding-top: 30px;
        }
        .typeGroup{
            .el-checkbox{
                width: 20%;
                margin: 30px 0px 0px;
            }
        }
    }
</style>